<!-- 区域管理-->
<template>
    <div class="safelist-search-container resource-manage" v-if="!state.isEdit">
        <div class="mb16 flex-sba">
            <a-row class="search-row" :gutter="20">
                <a-col>
                    区域名称:
                    <a-input v-model:value="state.searchData.likeName"
                        style="width: 200px;"
                        placeholder="输入区域名称" />
                </a-col>
                <a-col>
                    围栏类型:
                    <a-select v-model:value="state.searchData.type"
                        style="width: 200px;"
                        placeholder="请选择围栏类型"
                        allowClear>
                        <a-select-option v-for="item in getEnumOptions('fenceType')" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col >
                    <a-button type="primary"
                        class="mr8"
                        @click="handleSearch">搜索</a-button>
                    <a-button type="primary"
                        ghost
                        @click="handleEmpty">重置</a-button>
                </a-col>
            </a-row>
            <div>
                <a-button type="primary" danger class="nmc-add-btn-primary"

                    @click="addRole(1)"
                >新增</a-button>
            </div>
        </div>
        <div class="safelist-table-container">
            <a-table :columns="tableProps.columns"
                :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination"
                :scroll="{ y:'calc(100vh - 320px)'}"
               
            >
 <!-- :row-selection="rowSelection" -->
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex == 'type'">
                        {{ getEnumValue('fenceType',record.type) }}
                        <!-- {{ getEnumOptions('fenceType').find(item => item.value == record.fenceType)?.label }} -->
                    </template>
                    <template v-if="column.dataIndex == 'action'">
                        <a style="margin-right: 8px;"
                            @click='addRole(2,record)'
                        >编辑</a>
                        <a style="margin-right: 8px;"
                            @click='getRoleDelete(record)'
                        >删除</a>
                    </template>
                </template>
            </a-table>
        </div>
    </div>
    
    <!-- 编辑页面 -->
    <AreaEdit 
        v-show="state.isEdit" 
        ref="areaEditRef"

        @update:visible="handleEditClose"
        @success="handleEditSuccess"
    />
</template>

<script setup lang='jsx'>
import { onMounted, reactive, ref, unref, defineProps, createVNode, defineOptions } from 'vue'
// import { supplierPage } from "@/service/charging"
import { useRouter } from 'vue-router'
import { message, Modal } from "ant-design-vue"
import { ExclamationCircleOutlined } from "@ant-design/icons-vue"
import { useMainStore } from "@/store"
import AreaEdit from './components/areaEdit.vue'
import { getEnumOptions ,getEnumValue} from '@/utils/enum'
import { bizFenceQueryPage,bizFenceDelete } from '@/service/nmcApi'
defineOptions({
    name: 'areaManage'
})

const router = useRouter()
const mainStore = useMainStore()

const areaEditRef = ref(null)

const props = defineProps({
    // orgTreeData: {
    //     default: () => [],
    //     type: Array
    // },
})

// 表格选择配置
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        console.log('selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
        disabled: record.name === 'Disabled User',
        name: record.name,
    }),
};

const tableProps = ref({
    columns: [
        // {
        //     title: '',
        //     dataIndex: 'selection',
        //     width: 50,
        //     customRender: ({text, record, index, column}) => {
        //         return null; // 复选框由row-selection自动处理
        //     }
        // },
        {
            title: '序号',
            dataIndex: 'index',
            width:70,
            customRender: ({text, record, index, column}) =>{
                return (tableProps.value.pagination.current - 1) * tableProps.value.pagination.pageSize + Number(index) + 1;
            }
        },
        {
            title: '区域名称',
            dataIndex: 'name',
        },
        {
            title: '围栏类型',
            dataIndex: 'type',
        },
        {
            title: '关联企业',
            dataIndex: 'manufacturerName',
        },
        {
            title: '关联车数',
            dataIndex: '',
        },
        {
            title: '备注',
            dataIndex: 'description',
        },
        {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width:200
        }
    ],
    dataSource: [], //列表数据
    pagination: {
        current: 1,//当前页数
        pageSize: 10,//每页条数
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `${total}条`,
        showQuickJumper: true,
        onChange: (current, pageSize) => {
            tableProps.value.pagination.current = current;
            tableProps.value.pagination.pageSize = pageSize;
            getRolePage();
        }
    }
})

const state = reactive({
    //搜索数据
    searchData: {
        likeName: null, //区域名称
        type: null, //围栏类型
    },
    isEdit: false,
    editData: {}
})

onMounted(async() => {

    getSoure();
    getRolePage();
})

// 基础数据
const getSoure= (type,row)=>{

}

const addRole = (type, record) => {
    // type 1 新增 2 编辑
    if (type === 1) {
        // 新增区域
        state.editData = {}
    } else if (type === 2) {
        // 编辑区域
        state.editData = { ...record }
    }
    areaEditRef.value.loadEditData(state.editData,type == 2 ?'edit':'add')
    state.isEdit = true
}

// 处理编辑关闭
const handleEditClose = (visible) => {
    if (!visible) {
        state.isEdit = false
        state.editData = {}
    }
}

// 处理编辑成功
const handleEditSuccess = (data) => {
    // message.success(state.editData.id ? '编辑成功' : '新增成功')
    state.isEdit = false
    state.editData = {}
    getRolePage() // 刷新列表
}

//获取列表数据
const getRolePage = () => {
    
    let params = {
        ...state.searchData,
        pageNo: tableProps.value.pagination.current,
        pageSize: tableProps.value.pagination.pageSize,
        isDelete:false
    }
    bizFenceQueryPage(params).then(res => {
        if (res && res.status === "000_0000_0000") {
            tableProps.value.dataSource =  res.result.list
            tableProps.value.pagination.total =  Number(res.result.total)
        } else {
            tableProps.value.dataSource = []
            tableProps.value.pagination.total = 0
        }
    })

}
//搜索
const handleSearch = () => {
    tableProps.value.pagination.current = 1
    getRolePage()
}
//重置
const handleEmpty = () => {
    state.searchData = {
        likeName: null, //区域名称
        type: null, //围栏类型
    }
    tableProps.value.pagination.current = 1
    tableProps.value.pagination.pageSize = 10
    getRolePage()
}

// 点击 删除
const getRoleDelete = (record) => {
    Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: `您是否要删除"${record.name}"？`,
        okText: '确认',
        cancelText: '取消',
        onOk () {
            return new Promise((resolve, reject) => {
                // 删除逻辑
                bizFenceDelete({id:record.id}).then(res => {
                    if (res && res.status === "000_0000_0000") {
                        message.success('删除成功')
                        getRolePage()
                        resolve()
                    }
                })
            })
        },
    });
}

</script>
<style lang="less" scoped>
.resource-manage {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;
}
</style>
